<template>
  <div class="classify">
    <div class="types">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="goDetai(item.id)"
        >
          <img :src="item.pic56x56Url" alt="" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="list">
      <p>音乐推荐</p>
      <ul>
        <li v-for="(item, index) in hotList" :key="index">
          <img :src="item.picUrl" alt="" />
          <span>{{ item.copywriter }}</span>
        </li>
      </ul>
    </div>
    <div class="list myself">
      <p>情感</p>
      <ul>
        <li v-for="(item, index) in hotList2" :key="index">
          <img :src="item.picUrl" alt="" />
          <span>{{ item.copywriter }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { reqTypeApi } from "../../../api/radio";

export default {
  data() {
    return { list: [], flag: false, product: [], hotList: [], hotList2: [] };
  },
  computed: {},
  watch: {},

  methods: {
    async getTypes() {
      let result = await reqTypeApi();
      // console.log(result.data.categories);
      result.data.categories.splice(7, 1);
      result.data.categories.splice(12, 1);
      this.list = result.data.categories;
    },
    async goDetai(id) {
      this.$router.push({ path: `/classifydetail/${id}` });
    },
    async getHot(num) {
      let result = await axios.get(
        `http://localhost:3000/dj/hot?limit=6&offset=${num}`
      );
      if (result.data.code) {
        console.log(result.data);
        this.hotList = result.data.djRadios;
        // console.log(result.data.djRadios);
      }
      let result2 = await axios.get(
        `http://localhost:3000/dj/hot?limit=6&offset=${num + 2}`
      );
      if (result2.data.code) {
        this.hotList2 = result2.data.djRadios;
        // console.log(result.data.djRadios);
      }
    },
  },
  created() {
    this.getTypes();
    let num = parseInt(Math.random() * 10);
    this.getHot(num);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.types ul {
  display: flex;
  flex-wrap: wrap;
}
.types ul li {
  text-align: center;
  width: 25%;
}
.types ul li img {
  height: 50px;
}
.types ul li span {
  display: block;
}
.list {
  padding-top: 40px;
}
.list ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.list ul li {
  width: 30%;
  font-size: 10px;
}
.list p {
  padding-left: 20px;
  padding-bottom: 5px;
  /* display: inline-block; */
}
.list ul li img {
  width: 100%;
  border-radius: 10px;
}
.list ul li span {
  display: block;
  text-align: center;
}
.myself {
  padding-bottom: 60px;
}
</style>
